<template>
  <div style="position: relative">
    <input class="select_date" v-model="timeValue" @focus="inputFocuse"/>
    <i :style="{transform:popupShow ? '  translateY(-50%)  rotate(-90deg)' : '  translateY(-50%)  rotate(90deg)'}"
       class="select_date_arrow van-icon van-icon-arrow van-cell__right-icon"></i>
    <van-popup v-model="popupShow" closeable position="bottom" >
      <van-datetime-picker
          v-model="currentDate"
          :type="type"
          @confirm="dateConfirm"
          @cancel="popupShow = false"
      >
      </van-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
import {dateFormat} from "@/utils";

export default {
  name: "index",
  props: {
    timeValue: {},
    type: {
      type:String,
      default: 'date'
    }
  },
  data() {
    return {
      currentDate: null,
      popupShow: false
    }
  },
  methods: {
    inputFocuse() {
      document.activeElement.blur();
      this.popupShow = true
      this.currentDate = new Date(this.timeValue)
    },
    dateConfirm(value) {
      this.popupShow = false
      this.$emit('confirm', dateFormat(value,this.type === 'date' ? 'YYYY-mm-dd' : 'YYYY-mm'))
    }
  }
}
</script>

<style scoped>
.select_date {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #c3c5cb;
  font-size: 16px;
  padding: 0 15px;
  box-sizing: border-box;
  color: #333;
}

.select_date:focus {
  border: 1px solid #4e96de;
  transition: all .3s;
}
::v-deep .van-popup__close-icon--top-right{
    display: none;
}
.select_date_arrow {
  position: absolute;
  right: 10px;
  font-size: 22px;
  top: 50%;
  transition: all .3s ease;
}
</style>
